<template>
  <div id="app">
    <h1>选项式:</h1>
    <!-- optionAPI - data -->
    <O1Data/>
    <!-- optionAPI - template grammar -->
    <O2TempGram/>
    <!-- optionAPI - computed -->
    <O3Computed/>
    <!-- optionAPI - watch -->
    <O4Watch/>
    <!-- optionAPI - methods -->
    <O5Methods/>
    <!-- optionAPI - lifecycle -->
    <O6LifeCycle/>
    <!-- optionAPI - components -->
    <O7Components/>

    <h1>组合式:</h1>
    <!-- compositionAPI - setup -->
    <C1Setup/>
    <!-- compositionAPI - ref & reactive -->
    <C2RefReactive/>
    <!-- compositionAPI - computed -->
    <c3_computed/>
    <!-- compositionAPI - watch -->
    <c4_watch/>
    <!-- compositionAPI - lifecycle -->
    <c5_lifecycle/>
    <!-- compositionAPI - components -->
    <C6_components/>
  </div>
</template>
<script>
import O1Data from './components/Option/O1_data.vue'
import O2TempGram from './components/Option/O2_template-grammar.vue'
import O3Computed from './components/Option/O3_computed.vue'
import O4Watch from './components/Option/O4_watch.vue'
import O5Methods from './components/Option/O5_methods.vue'
import O6LifeCycle from './components/Option/O6_lifecycle.vue'
import O7Components from './components/Option/O7_components.vue'

import C1Setup from './components/Composition/C1_setup.vue'
import C2RefReactive from './components/Composition/C2_ref-reactive.vue'
import C3_computed from "./components/Composition/C3_computed.vue";
import C4_watch from "./components/Composition/C4_watch.vue";
import C5_lifecycle from "./components/Composition/C5_lifecycle.vue";
import C6_components from "./components/Composition/C6_components.vue";

export default {
  name: 'App',
  components: {
    O1Data,
    O2TempGram,
    O3Computed,
    O4Watch,
    O5Methods,
    O6LifeCycle,
    O7Components,

    C1Setup,
    C2RefReactive,
    C3_computed,
    C4_watch,
    C5_lifecycle,
    C6_components,
  }
}
</script>